<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.1.1.js"></script>
</head>

<body>
    <p>姓名：<input type="text" name="" id=""></p>
    <p>年龄：<input type="text" name="" id=""></p>
    <p>电话：<input type="text" name="" id=""></p>
    <p>住址：<input type="text" name="" id=""></p>
    <p><button>确认</button></p>
</body>
<script>
    //  document.getElementsByTagName('button')[0].addEventListener('click', function () {
    //         console.log(1)
    //     },true)
    $(function () {

        // 上机练习四
        $('<p>姓别：<input type="text"></p>').insertAfter('p:first');
        $('input:eq(1)').attr('id', 'sex')
        // 上机练习五

        $('button').on('click', function () {
            let a = [];
            let shuzu = '';
            for (let i = 0; i < $('input').length; i++) {
                let b = $('input')[i].value;
                a.push(b)
            }
            for (let i = 0; i < $('p').length - 1; i++) {
                let vv = $('p')[i].innerText
                shuzu += vv + a[i] + ' ';

            }
            alert(shuzu)
        })

        // 上机练习6
        $('input:eq(4)').css({
            'border': '1px solid red',
            'width':'200px',
            'height':'100px'
        })

        console.log($('input')[4])

    })
</script>

</html>